<template>
  <div>
    <input type="text">
    <div v-html="content" class="main"></div>
    <el-button class="test" type="primary" @click="showPicker = true"
      >换主题色</el-button
    >
    <el-button @click="expandFont('20px')">改变字体大小到20px</el-button>
    <el-button type="primary" @click="changeTheme" v-if="showPicker"
      >确定</el-button
    >

    <chrome-picker v-model="colors" v-if="showPicker" />
  </div>
</template>
<script>
import { Chrome } from "vue-color";
import viriableSet from "../utils/viriableSet";
export default {
  name:'Theme',
  data() {
    return {
      colors: "#194d33",
      showPicker: false,
      content: "",
    };
  },
  components: { "chrome-picker": Chrome },
  mounted() {
    this.$get("/docs/theme").then((res) => {
      this.content = res;
    });
  },
  methods: {
    changeTheme() {
      let color = this.colors.hex ? this.colors.hex : this.colors;
      viriableSet("--main-color", color);
      this.showPicker = false;
    },
    expandFont(value) {
      viriableSet("--main-size", value);
    },
  },
};
</script>
<style lang="scss" scoped>
.test {
  background-color: var(--main-color);
}
.main {
  font-size: var(--main-size);
  color: var(--main-color);
}
</style>